<docs>
  ## 首页
</docs>
<template>
  <div class="index">
    <mheader type="index" @back_btn="goBack()" title="人事档案服务"></mheader>
    <!-- 申请须知 开始 -->
    <div class="li0"></div>
    <div class="list">
      <div class="content">
        <div class="c-li0"></div>
        <ul>
          <li v-show="noticeVisible" @click="yy_enter">
            <p>档案服务预约</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li>
          <li v-show="noticeVisible" @click="cd_enter">
            <p>存档信息查询</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li>
          <li v-show="noticeVisible" @click="kj_enter">
            <p>出具证明服务</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li>
          <li v-show="noticeVisible" @click="tx_enter">
            <p>个人退休申请预约</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li>
          <li v-show="noticeVisible" @click="bg_enter">
            <p>信息变更服务</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li>
          <li v-show="noticeVisible" @click="db_enter">
            <p>代办个人社保信息变更服务</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li><li v-show="noticeVisible1">
            <p>开具调函服务</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li>
          <li v-show="noticeVisible" @click="Guide_enter">
            <i class="iconfont1 icon-compass2"></i>
            <p>服务指南</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li>
          <li v-show="noticeVisible" @click="wt_enter">
            <i class="iconfont1 icon-question"></i>
            <p>常见问题</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li>
          <li v-show="noticeVisible" @click="jg_enter">
            <i class="iconfont1 icon-office"></i>
            <p>机构名录</p>
            <i class="iconfont icon-arrow icon-after"></i>
          </li>
        </ul>
      </div>
    <!-- 申请按钮 开始 -->
    <div class="apply">
      <div class="info">
        <p class="info-cont1-name">姓名：{{grxx.xm}}</p>
        <p class="info-cont2">身份证：{{grxx.sfzhm}}</p>
      </div>
    </div>

    </div>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import $ from "@/common/js/axios";
import { mapActions } from "vuex";

export default {
  components: { Mheader },
  name: "index",
  data() {
    return {
      visible: false,
      grxx:{

      },
      noticeVisible: true,
      noticeVisible1: false,
      noticeText: ""
    };
  },
  methods: {
    ...mapActions(["getUsers"]),
    goBack() {
      this.$router.go(-1);
    },
    // 申请记录页面跳转
    sqList() {
      if (this.noticeText != "暂无申请记录") {
        this.$router.push({ name: "search" });
      }
    },
    kj_enter() {
      this.$router.push({ name: "reverseTwo" });
    },
    // 存档信息查询
    cd_enter() {
      this.$router.push({ name: "readKnow" });
    },
    // 档案预约
    yy_enter(){
      this.$router.push({ name: "dayydayy" });
    },
    // 退休预约
    tx_enter(){
      this.$router.push({ name: "txyytxyy" });
    },
    // 信息变更
    bg_enter(){
      this.$router.push({ name: "xxbgxxbg" });
    },
    // 代办个人社保信息变更服务
    db_enter(){
      this.$router.push({ name: "dbbgdbbg" });
    },
    // 检查按钮是否可用
    reverseBtn() {
      this.$router.push({ name: "reverseOne" });
    },
    // 服务指南
    Guide_enter(){
      this.$router.push({ name: "search" });
    },
    // 常见问题
    wt_enter(){
      this.$router.push({ name: "cjwt" });
    },
    // 机构名录
    jg_enter(){
      this.$router.push({ name: "jgTable" });
    }
  },
  created() {
    this.getUsers();
  },
  watch:{
    '$store.state.person':function(){
      this.grxx = this.$store.state.person;
    }
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/variable.scss";

//竖屏  CSS
@media screen and (orientation: portrait) {
  .index {
    position: relative;
    // height: 100vh;
    width: 100vw;
  }
  .apply {
    // position: absolute;
    width: 100%;
    bottom: 0;
  }
}
@media screen and (orientation: landscape) {
  //横CSS
}
// 申请须知
.list {
  border: $border;
  border: none;
  height: 92%;
  ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: Center;
    flex-flow: wrap;
  }
  .title {
    display: flex;
    padding: 28px 48px;
    border-bottom: $border;
  }
  .title-h3 {
    font-size: $font-size-large;
    color: $color-text-title;
    flex: 1 1 auto;
    line-height: 80px;
  }
  .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 48px 15px 48px;
    line-height: 64px;
    background-color: #fff;
    .iconfont1{
      color: #2e7ef7;
      font-size: 0.56074rem;
      font-weight: 100;
    }

    li:first-child{
      background: url("~imgs/cdxxcx.png") 30px 30px no-repeat;
      background-size: 70px;
    }
    li:nth-child(2){
      background: url("~imgs/kjzm.png") 30px 30px no-repeat;
      background-size: 70px;
    }
    li:nth-child(3){
      background: url("~imgs/cjzm.png") 25px 30px no-repeat;
      background-size: 70px;
    }
    li:nth-child(4){
      background: url("~imgs/grtx.png") 33px 30px no-repeat;
      background-size: 70px;
    }
    li:nth-child(5){
      background: url("~imgs/xxbg.png") 30px 30px no-repeat;
      background-size: 70px;
    }
    li:nth-child(6){
      background: url("~imgs/dbgr.png") 25px 30px no-repeat;
      background-size: 70px;
    }
    li:nth-child(8), li:nth-child(9),  li:nth-child(10){
      padding-left: 0.29259rem;
      p{
        padding-left: 0.19259rem;
      }
    }
    li:last-child{
      background: url("~imgs/kjdh.png") 35px 20px no-repeat;
      background-size: 60px;
      border: none;
    }
    ul {
      margin-top: 18px;
      width: 100%;
      padding: 2px 60px 0 60px;
      box-shadow: -10px 0px 0 #eee,   /*左边阴影*/
                    0px -10px 5px #fff,  /*上边阴影*/
                   10px 0px 5px #eee,  /*右边阴影*/
                    0px 18px 10px #eee; /*下边阴影*/
      border-radius: 8px;
      box-sizing: border-box;
    li {
      width: 100%;
      height: 120px;
      box-sizing: border-box;
      border-bottom: 1px solid #dbdbdb;
      // border-bottom: 1px solid #000;
      display: flex;
      align-items: center;
      position: relative;
      padding-left: 80px;
      background-color: #fff !important;
      .iconfont {
        font-size: 48px * 1.5;
      }
      .icon-after {
        color: $color-text-label;
      }
      p {
        font-size: 50px;
        color: #333;
        flex: 1 1 auto;
        padding: 0 30px;
        line-height: 1.5;
      }
    }
    }
    .c-li0 {
      box-shadow: 0 0 20px #dbdbdb;
      border-radius: 8px;
      height: 481px;
      background: url("~imgs/ld_index.png") 0 0 no-repeat;
      background-size: $width-100 481px;
    }
  }
}
// 申请按钮
.apply {
  margin-top:0;
  display: flex;
  width: $width-100;
  line-height: 1.5;
  .info-cont1-name {
    font-weight: 900;
    font-size: 55px;
    color: $color-text-title;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2e7ef7;
  }
  .info-cont2 {
    font-weight: 900;
    color: #9e9e9e;
    font-size: 55px;
  }
  .info {
    border:none;
    width: 100%;
    border-right: 0;
    background-color: #fff;
    padding: $padding-base/2 48px;
  }
}
</style>
